/* eslint-disable */
import echarts from "echarts/lib/echarts";
import Chart from "echarts-for-react/lib/core";

// 折线图
export default function ChartLine({ title = "", xData = [], data = [], name1 = "", name2 = "" }) {
  const option = {
    color: "rgba(0,255,240,1)",
    title: { text: title, left: "center", textStyle: { color: "#fff" } },
    grid: {
      top: 30,
      left: 10,
      right: 20,
      bottom: 10,
      containLabel: true
    },
    tooltip: { trigger: "axis" },
    legend: {
      data: [name1, name2],
      top: "0",
      textStyle: {
        color: "#fff"
      }
    },
    xAxis: {
      axisLine: { show: true },
      axisTick: { show: false },
      splitLine: { show: false },
      axisLabel: { color: "#fff" },
      data: xData,
      boundaryGap: false
    },
    yAxis: [
      {
        type: 'value',
        name: `${name1}(t)`,
        splitLine: { show: false },
        axisTick: { show: false },
        axisLine: { lineStyle: { color: "#fff" } },
        axisLabel: { 
          show: true,
          textStyle: {
            color: "#fff"
          }
        }
      },
      {
        type: 'value',
        name: `${name2}(t)`,
        splitLine: { show: false },
        axisTick: { show: false },
        axisLine: { lineStyle: { color: "#fff" } },
        axisLabel: { 
          show: true,
          textStyle: {
            color: "#fff"
          }
        }
      }
    ],
    series: [
      {
        name: name1,
        type: "line",
        yAxisIndex: 0, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
        smooth: true, //平滑曲线显示
        showAllSymbol: true, //显示所有图形。
        symbol: "circle", //标记的图形为实心圆
        symbolSize: 5, //标记的大小
        itemStyle: {
          //折线拐点标志的样式
          color: "#11F4FF"
        },
        lineStyle: {
          color: "#11F4FF"
        },
        data: [3100, 3700, 4300, 4700, 4800, 4600, 4300, 3500, 3050, 3100, 3300, 3600]
      },
      {
        name: name2,
        type: "line",
        yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
        smooth: true, //平滑曲线显示
        showAllSymbol: true, //显示所有图形。
        symbol: "circle", //标记的图形为实心圆
        symbolSize: 5, //标记的大小
        itemStyle: {
          //折线拐点标志的样式
          color: "#F1C75B"
        },
        lineStyle: {
          color: "#F1C75B"
        },
        data: [2200, 1800, 1750, 1600, 1750, 1800, 2100, 2800, 3100, 3050, 3000, 2800]
      },
    ]
  };

  return (
    <div className="situational-detail">
      <Chart
        echarts={echarts}
        option={option}
        notMerge
        lazyUpdate
        style={{ height: 200 }}
      />
    </div>
  );
}